<div class="modal fade" id="speakAdd">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form action="{{route('addSpeak')}}" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="form-group">
                        <label for="book_name" class="control-label">书名 <i class="fa fa-bookmark-o"></i>:</label>
                        <div class="">
                            <input type="text" name="book_name" id="book_name" class="form-control" value="" title=""
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="content" class="control-label">内容 :</label>
                        <div class="">
                            <input type="text" name="content" id="contentD" class="form-control" value="" title=""
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="publish_date" class="control-label">发布时间:</label>
                        <div class="">
                            <input type="date" name="publish_date" id="publish_date" class="form-control" value=""
                                   required="required">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="bg_img" class="control-label">书籍图片 <i class="fa fa-picture-o"></i>:</label>
                        <div style="width: 200px;height: 200px;border: 1px solid transparent">
                            <img id="pre_img" src="" alt="2:3 比例" style="text-align: center;line-height: 200px;width: 100%;display: block;font-size: 35px
;background: grey;opacity: 0.3;max-height: 200px">
                        </div>
                        <div class="" style="margin-top: 20px">
                            <input type="file" name="bg_img" id="bg_img" class="form-control"
                                   required="required">
                        </div>
                    </div>
                    <hr>
                    <div class="">
                        <button type="button" style="width: 100%" class="btn btn-info" data-dismiss="modal">关闭</button>

                        <button type="submit" style="width: 100%;margin-top: 20px" class="btn btn-danger">保存</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
    $('#bg_img').on('change', function (e) {
        var file = e.target.files[0];
        var src = URL.createObjectURL(file);
        $('#pre_img').attr('src', src);
    });
    @if(session('speakAddSuccess'))
    swal("Oops...", "添加成功!", "success");
    @endif

    @if($errors->has('speakAddError'))
    swal("Oops...", "添加失败了!", "error");
    @endif


</script>